<template>
  <view class="comment-item" :class="{ 'me': comment.createBy === user.userId}">
    <view class="left">
      <image class="avatar" :src="avatar" mode="aspectFill"></image>
    </view>
    <view class="right">{{ comment.content }}</view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import config from '../request/config'

export default {
  name: 'CommentItem',
  props: {
    comment: {
      type: Object,
    },
  },
  data() {
    return {
      
    }
  },
  created() {
  },
  computed: {
    ...mapGetters('userInfo', ['user']),
    avatar() {
      const avatar = this.comment.avatar
      return avatar ? config.baseUrl + avatar : 'https://sanshengcai.com/home/images/logo.png'
    }
  },
  methods: {
    
  }
}
</script>

<style scoped lang="scss">
.me {
  flex-direction: row-reverse;
  .right {
    background-color: #fff;
    margin-right: 20rpx;
  }
}

.comment-item {
  display: flex;
  padding: 0 30rpx;
  margin: 30rpx 0;

  .left {
    flex-shrink: 0;
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
  }
  .right {
    background-color: #7BE188;
    margin-left: 20rpx;
    border-radius: 10rpx;
    padding: 10rpx;
    max-width: 70%;
  }
}
</style>